<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '学生管理',
	},
}
</route>

<template>
	<view class="page-manage h-[100vh] box-border">
		<fly-navbar backgroundColor="#fff" leftText="学生管理" fixed />
		<no-page v-if="thisPage === 0" @click="retry" type="btn"></no-page>
		<view class="relative h-full box-border pb-[283rpx] box-border" v-if="thisPage === 1">
			<scroll-view scroll-y class="h-full">
				<view class="w-full px-8 pb-4 pt-[280rpx] box-border">
					<block v-if="list.length">
						<uni-swipe-action>
							<view
								class="w-full h-[167rpx] relative mb-4"
								v-for="(item, index) in list"
								:key="item.student_id"
							>
								<uni-swipe-action-item class="w-full h-full absolute top-0 left-0 z-2 block">
									<view
										@tap="change(index)"
										class="w-full h-[167rpx] px-4 py-4 box-border rounded-[83rpx] flex justify-between items-center"
										:style="{ background: item.is_default === 1 ? '#E7F0FD' : '#F6F7F9' }"
									>
										<view class="flex justify-between items-center">
											<image
												class="w-[102rpx] h-[102rpx] rounded-[50%] border-1 border-solid border-[#fff] mr-1"
												:src="item.avatar || baseImg + '/user-default.png'"
											></image>
											<view class="flex flex-col pl-2 py-4">
												<text class="text-[#303030] text-[33rpx]">{{ item.username }}</text>
												<text class="text-[#5E5E5E] text-[24rpx] mt-2">{{ item.school_name }}</text>
											</view>
										</view>
										<radio
											:checked="item.is_default === 1"
											v-if="item.is_default === 1"
											color="#6FA5F3"
										></radio>
									</view>

									<template v-slot:right>
										<view
											@tap.stop="ruleModal(true, item)"
											class="w-[160rpx] h-full text-[#ffffff] text-[33rpx] flex justify-center items-center rounded-rt-[83rpx] rounded-rb-[83rpx]"
										>
											删除
										</view>
									</template>
								</uni-swipe-action-item>
								<view
									class="w-full px-4 py-4 box-border h-[167rpx] text-[#ffffff] absolute z-1 top-0 left-0 text-[33rpx] flex justify-end items-center rounded-[83rpx]"
									style="background: #ed8876"
								>
								</view>
							</view>
						</uni-swipe-action>
					</block>

					<view class="w-full flex flex-col justify-center items-center pb-8" v-else>
						<image :src="baseImg + '/class/class-login.png'" class="w-[352rpx] h-[317rpx]"></image>
						<text class="text-[#474747] text-[32rpx] mt-4">您还未添加学生哦~</text>
					</view>
					<view
						@tap="toPersonal"
						class="w-full h-[97rpx] rounded-[83rpx] text-[#303030] text-[32rpx] flex justify-center items-center"
						:style="{ background: '#F6F7F9' }"
					>
						<uni-icons type="plusempty" class="mr-1"></uni-icons> 添加学生
					</view>
				</view>
			</scroll-view>
			<view class="w-full h-[283rpx] absolute bottom-0 left-0" v-if="list.length">
				<view class="w-full h-full relative">
					<image
						class="w-[430rpx] h-[105rpx] absolute left-[50%] -translate-x-[50%] top-0 z-1"
						:src="baseImg + '/my/personal-success.png'"
					></image>
					<view
						@tap="confirm"
						class="w-[430rpx] h-[105rpx] flex justify-center items-center absolute text-[#F4F7F4] text-[40rpx] left-[50%] -translate-x-[50%] top-0 z-2"
						>确 定</view
					>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="false" type="center" background-color="none">
			<view class="w-[100vw] px-4 box-border" v-if="accountInfo">
				<view class="w-full rounded-[30rpx] bg-white relative px-6 py-6 box-border">
					<text class="text-[#303030] text-[44rpx] w-full inline-block text-center"
						>确认移除学生</text
					>
					<view class="w-full pt-[74rpx] py-[87rpx]">
						<view class="text-[#303030] text-[29rpx]"
							>您将要移除学生<text class="text-[#34A4E2]" v-if="accountInfo && accountInfo.name"
								>"{{ accountInfo.name }}"</text
							></view
						>
						<view
							class="w-full h-[101rpx] px-3 py-2 mt-[18rpx] box-border rounded-[83rpx] flex justify-between items-center"
							style="background: #f6f7f9"
						>
							<view class="flex justify-between items-center">
								<image
									class="w-[70rpx] h-[70rpx] rounded-[50%] border-1 border-solid border-[#fff] mr-1"
									:src="accountInfo.avatar || baseImg + '/user-default.png'"
								></image>
								<view class="flex flex-col pl-2 py-2">
									<text class="text-[#303030] text-[25rpx]">{{ accountInfo.username }}</text>
									<text class="text-[#5E5E5E] text-[21rpx] mt-2">{{
										accountInfo.school_name
									}}</text>
								</view>
							</view>
						</view>
						<view class="text-[#ED8876] text-[29rpx] mt-[34rpx]">该操作不可逆，请谨慎操作</view>
					</view>
					<view class="w-full grid grid-cols-2 gap-x-6">
						<view
							class="h-[83rpx] w-full rounded-[42rpx] text-[32rpx] text-[#fff] flex justify-center items-center"
							style="background: #ed8876"
							@tap="deleteBook(accountInfo.student_id)"
							>确认移除</view
						>
						<view
							@tap="ruleModal(false)"
							class="h-[83rpx] w-full rounded-[42rpx] text-[32rpx] text-[#fff] flex justify-center items-center"
							style="background: #2ba5e0"
							>取消操作</view
						>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import {
	getStudentList,
	setDefaultUserInfo,
	getDefaultUserInfo,
	delStudentInfo,
} from '@/service/user';
import { useUserStore } from '@/store';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const list = ref([]);
const linkType = ref('');
const thisPage = ref(-1);
const popup = ref(null);
const accountInfo = ref(null);

const showAdd = computed(() => {
	return !!list.value.filter(item => item.is_default === 1).length;
});

onShow(() => {
	getList();
});

onLoad(options => {
	if (options.type) {
		linkType.value = options.type;
	}
});

const ruleModal = (flag, item?) => {
	if (flag) {
		popup.value.open();
		accountInfo.value = item;
	} else {
		popup.value.close();
		accountInfo.value = null;
	}
};

const deleteBook = async (id: number) => {
	uni.showLoading({ title: '删除中...' });
	try {
		const res = await delStudentInfo({
			student_id: id,
		});
		uni.hideLoading();
		ruleModal(false);
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '删除成功',
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
		setTimeout(() => {
			getList();
		}, 1500);
	} catch (error) {
		ruleModal(false);
		uni.showToast({
			icon: 'none',
			title: '删除失败',
		});
		setTimeout(() => {
			getList();
		}, 1500);
	}
};

const getList = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getStudentList();
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			list.value = res.data;
			thisPage.value = 1;
		} else {
			thisPage.value = 0;
		}
		const defaultUser = await getDefaultUserInfo();
		if (defaultUser.status_code === 200) {
			userStore.setUserInfo(defaultUser.data);
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
	}
};

const retry = () => {
	getList();
};

const change = index => {
	list.value = list.value.map((item, windex) => {
		const obj = Object.assign(item);
		obj.is_default = 0;
		if (windex === index) {
			obj.is_default = 1;
		}
		return obj;
	});
};

const confirm = async () => {
	if (!showAdd) {
		uni.showToast({
			icon: 'none',
			title: '请选择默认账户',
		});
		return;
	}
	const obj = list.value.find(item => item.is_default === 1);
	if (!obj) return;
	if (obj.student_id === userInfo.value.student_id) {
		if (linkType.value === 'back') {
			uni.navigateBack({ delta: 1 });
		} else {
			uni.switchTab({
				url: '/pages/index/index',
			});
		}
		return;
	}
	try {
		const res = await setDefaultUserInfo(obj.student_id);
		if (res.status_code === 200) {
			uni.showToast({
				icon: 'none',
				title: '设置成功',
				success: async () => {
					if (linkType.value === 'back') {
						const defaultUser = await getDefaultUserInfo();
						if (defaultUser.status_code === 200) {
							userStore.setUserInfo(defaultUser.data);
						}
						uni.navigateBack({ delta: 1 });
					} else {
						getList();
					}
				},
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
	} catch (error) {
		uni.showToast({
			icon: 'none',
			title: '服务器异常',
		});
	}
};

const toPersonal = () => {
	uni.navigateTo({
		url: '/pages-user/account/add/index',
	});
};
</script>
<script lang="ts">
export default {
	options: { styleIsolation: 'shared' },
};
</script>

<style lang="scss">
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.page-manage {
	:deep(.uni-data-checklist .checklist-group .checklist-box) {
		margin: 0;

		.checkbox__inner {
			border-radius: 50% !important;
		}
	}
}
</style>
